<template>
  <div class="video-screen">
    <div class="container cruise-video">
      <div class="label">{{ data }}</div>
      <video
        :id="'videoId' + index"
        url="http://192.168.1.29:49000/YDT-ONVIF-251227033907363-5L07732PAJD21AA/0/0"
        controls
        isLive
        height="100%"
        width="100%"
        muted
      ></video>
      <div class="btn-wrap">
        <!-- <div class="play-btn" @click="playFn()">
          <img :src="videoIcon.play" alt="开始" />
        </div>-->
        <div class="stop-btn" @click.stop="stopFn()">
          <img :src="videoIcon.stop" alt="停止" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import flvjs from "flv.js";
import bus from "@/utils/bus";
import { getData, postData } from "@/request/http";

export default {
  name: "",
  components: {},
  props: {
    url: {
      type: String,
      default: ""
    },
    sn: {
      type: String,
      default: ""
    },
    index: {
      type: Number,
      default: 0
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    //传来的name即lable
    data: {
      type: String,
      default: ""
    },

    item: {
      type: Object,
      default() {
        return {
          status: true,
          label: "",
          sn: ""
        };
      }
    }
  },
  data() {
    return {
      flvPlayer: null,
      videoData: {},
      //开始结束icon
      videoIcon: {
        //play: require("@/assets/img/video-play1.png"),
        stop: require("@/assets/img/video-stop2.png")
      },
      url_new: ""
    };
  },
  computed: {
    flag() {
      return this.$store.state.cameraPlay.flag;
    }
  },
  created() {},
  mounted() {
    if (this.flvPlayer) {
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
      this.flvPlayer.destroy();
      this.flvPlayer = null;
    }
    if (flvjs.isSupported() && this.sn != "") {
      this.url_new = this.url;
      this.getUrl(this.sn);
    }

    //接收全部停止
    bus.$on("allStop", _new => {
      // console.log(_new);
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
      this.flvPlayer.destroy();
      this.flvPlayer = null;

      for (var i = 0; i < _new.length; i++) {
        //  console.log(_new[i].status);
        _new[i].status = false;
      }
    });
  },
  methods: {
    //init video
    initPlay() {
      let videoElement = document.getElementById("videoId" + this.index);
      if (!this.sn) {
        return;
      }
      this.flvPlayer = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        hasAudio: false,
        url: this.url_new,
        cors: true,
        enableWorker: true,
        enableStashBuffer: false,
        stashInitialSize: 128,
        autoCleanupSourceBuffer: true
      });

      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
      this.flvPlayer.play();
    },
    //当再次点击开始按钮的时候，重新申请票据，获取url
    getUrl(sn) {
      if (!sn) {
        return;
      }
      return new Promise((resolve, reject) => {
        postData("/adminweb/device/stream/live/url/ticket/once", {
          sn: sn,
          ptl: "HTTP-FLV",
          channel: 0,
          sub: 0
        })
          .then(res => {
            this.url_new = res.datas.stream;
            this.initPlay();
            resolve(res);
          })
          .catch(res => {
            //console.log(res);
            reject("error");
            this.$message.error("error");
          });
      });
    },
    //单个停止
    stopFn() {
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
      this.flvPlayer.destroy();
      this.flvPlayer = null;
      this.item["status"] = false;
      bus.$emit("hideControl", this.item);
    }
  },
  watch: {
    data: {
      handler(_new) {
        this.videoData = _new;
       // console.log(_new);
      },
      deep: true
    }
  },
  beforeDestory() {
    this.flvPlayer.pause();
    this.flvPlayer.unload();
    this.flvPlayer.detachMediaElement();
    this.flvPlayer.destroy();
    this.flvPlayer = null;
  }
};
</script>
<style scoped>
.video-screen {
  width: 100%;
  height: 100%;
  z-index: 999;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.label {
  position: absolute;
  right: left;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  width: auto;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  border-radius: 10px;
  z-index: 999;
}
.btn-wrap {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
/* .play-btn {
  cursor: pointer;
}
.play-btn img {
  width: 80%;
  height: 80%;
} */
.stop-btn {
  cursor: pointer;
}
.stop-btn img {
  width: 80%;
  height: 80%;
}

/* 隐藏播放、暂停等各类播放器功能按钮 */

video::-webkit-media-controls-play-button {
  display: none;
}
video::-webkit-media-controls-timeline {
  display: none;
}
video::-webkit-media-controls-mute-button {
  display: none;
}
/* 
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-current-time-display{
    display: none;            
}
video::-webkit-media-controls-time-remaining-display {
    display: none;            
}

video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;            
}
video::-webkit-media-controls-volume-slider {
    display: none;            
}
video::-webkit-media-controls-enclosure{
    display: none;
} */

/* 视频全铺 */
.video {
  object-fit: fill;
}
</style>
